<template>
	<view class="liver-container" :style="liverstyle">
		<view :class="'liver-item ' + mydata.type">
			<view
				@click="liveClick(item)"
				v-for="(item, i) in list"
				:key="i"
				class="liver-item-box"
				:style="'border-radius:' + mydata.radius.top / 2 + 'px ' + mydata.radius.top / 2 + 'px ' + mydata.radius.bottom / 2 + 'px ' + mydata.radius.bottom / 2 + 'px '"
			>
				<view class="">
					<view class="img_box">
						<vimage  lazy-load="" :src="item.cover_img" alt="" class="img_box"></vimage>
					</view>
					

					<view class="liver-status">
						<view class="liver-status-box">{{ item | getstatus }}</view>
					</view>
				</view>
				<view class="liver-info">
					<view class="liver-info-box">
						<view class="liver-info-title line1">{{ item.title }}</view>
						<view class="liver-info-user u-flex">
							<!-- <img src="@/assets/images/nologin.jpg" /> -->
							<span>{{ item.anchor_name }}</span>
						</view>
					</view>
					<view class="liver-com_box">
						<view class="img_box" v-for="(goods, index) in item.liveGoods" :key="index"><vimage class="" :src="goods.cover_img_url"></vimage></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			list: []
		};
	},
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	filters: {
		getstatus(item) {
			switch (item.status) {
				case 101:
					return '直播中';
					break;
				case 102:
					return '预告 ' + item.start_time.substring(5, 16);
					break;
				case 103:
					if (item.close_replay) {
						return '回看';
					} else {
						return '已结束';
					}

					break;
				case 104:
					return '禁播';
					break;
				case 105:
					return '暂停';
					break;
				case 106:
					return '异常';
					break;
				case 107:
					return '已过期';
					break;
			}
		}
	},
	computed: {
		liverstyle() {
			return 'padding: ' + this.mydata.margin.top / 2 + 'px ' + this.mydata.margin.lr / 2 + 'px ' + this.mydata.margin.bottom / 2 + 'px';
		}
	},
	created() {
		this.getlist();
	},
	methods: {
		getlist() {
			let data = {};
			if (this.mydata.showtype == 2) {
				let room_ids = [];
				this.mydata.list.forEach(a => {
					room_ids.push(a.room_id);
				});
				if(room_ids.length>0){
					data.room_ids = room_ids.join(',');
				}else{
					this.list=[]
					return false
				}
				
			}

			this.$http('/live/room/list', data, 'get').then(res => {
				this.list = res.data.msg.data;
			});
		},
		liveClick(liveData) {
			// let userId = this.userInfo ? this.userInfo.options.user_id : 0;
			// let customParams = {user_id: userId}; // 开发者在直播间页面路径上携带自定义参数
			uni.navigateTo({
				url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${liveData.room_id}`
			});
		}
	}
};
</script>

<style type="text/css" lang="scss" scoped>
.line1 {
	overflow: hidden;
	text-overflow: ellipsis;

	white-space: nowrap;
}
.liver-container {
	.liver-item {
		.liver-item-box {
			position: relative;
			border-radius: 20rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
		}
		.img_box {
			height: 300rpx;
			width: 100%;
		}
		.liver-status {
			display: flex;
			position: absolute;
			top: 16rpx;
			left: 40rpx;
			height: 40rpx;
			i {
				font-size: 40rpx;
				position: absolute;
				left: -20rpx;
				top: -4rpx;
			}

			.liver-status-box {
				border-radius: 24rpx;
				padding: 0 24rpx 0 30rpx;
				color: #fff;
				font-size: 24rpx;
				line-height: 40rpx;
				background: rgba(0, 0, 0, 0.3);
			}
		}
		.liver-info {
			width: 100%;
			background: #fff;
			padding: 10rpx;
			display: flex;
			align-items: center;
			.liver-info-box {
				width: 60%;
				.liver-info-title {
					font-size: 28rpx;
					line-height: 40rpx;
				}
				.liver-info-user {
					font-size: 24rpx;
					line-height: 34rpx;
					margin-top: 10rpx;
					img {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}
			}
			.liver-com_box {
				// flex: 1;
				display: flex;
				.img_box {
					width: 80rpx;
					height: 80rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.item_two {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.img_box {
			height: 340rpx;
			width:340rpx;
		}
		.liver-info {
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			.liver-com_box {
				margin-top: 20rpx;
				width: 100%;
				display: flex;
				justify-content: space-around;
			}
		}
		.liver-item-box {
			width: 340rpx;
			margin-bottom: 20rpx;
		}
	}
	.item_three {
		.img_box {
			height: 300rpx;
			width: 300rpx;
		}
		.liver-info {
			height: 300rpx;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
		}
		.liver-com_box {
			// height: 40px;
		}
		.liver-item-box {
			display: flex;
		}
	}
}
</style>
